<template>
<div class="upload-group">
    <div class="video-box" v-if="video_link">
        <video class="video" :src="video_link" controls="controls">
            您的浏览器不支持 video 标签。
        </video>
        <div class="mark"></div>
        <i class="el-icon-close remove" @click="handleRemove()"></i>
    </div>
    <el-upload v-if="!video_link" class="avatar-uploader" :action="uploadAction" :headers="uploadHeader" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload">
        <img v-if="video_link" :src="video_link" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <p class="warning">{{placeholder}}</p>
</div>
</template>

<script>
import {
    getToken
} from '@/utils/auth';

export default {
    name: "UploadPicture",
    props: {
        value: {
            type: String,
            default: function () {
                return [];
            },
        },
        placeholder: {
            type: String,
            default: "请选择附件",
        },
        // 上传文件的类型
        fileType: {
            type: Array,
            default: function () {
                return [
                    'video/mp4',
                    'video/ogg',
                    'video/webm',
                    'video/x-msvideo',
                    'video/x-ms-wmv',
                    'video/x-flv',
                    'video/x-matroska',
                ];
            }
        },
        // 文件大小限制
        fileSize: {
            type: Number,
            default: function () {
                return 100;
            }
        },
    },
    data() {
        let header = {};
        header["X-Token"] = getToken();

        return {
            uploadAction: process.env.VUE_APP_BASE_API + "/api/system.file/upload",
            uploadHeader: header,
            video_link: ''
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.video_link = val;
            },
        },
    },
    methods: {
        handleSuccess(res, file) {
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            }

            const newFile = {
                ext: res.data.extname,
                name: file.name,
                url: res.data.path,
            };

            this.video_link = res.data.path;
            this.$emit("input", this.video_link);
        },
        beforeUpload(file) {
            // 判断文件类型是否为mp4
            if (!this.fileType.includes(file.type)) {
                this.$message.error('上传视频只能是mp4格式!');
                return false;
            }

            // 判断文件大小是否小于30M
            if (file.size / 1024 / 1024 > this.fileSize) {
                this.$message.error(`上传视频大小不能超过${this.fileSize}M!`);
                return false;
            }

            return true;
        },
        handleRemove() {
            this.video_link = '';
            this.$emit("input", this.video_link);
        }
    }
}
</script>

<style lang="less">
.avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
        object-fit: cover;
    }
}

.warning {
    color: #C0C4CC;
}

.video-box {
    position: relative;

    .video {
        width: 100%;
        max-height: 100px;
        border-radius: 6px;
    }
    
    .remove {
        display: none;
        position: absolute;
        // 相对父元素的右上角
        top: 10px;
        right: 10px;
        color: #F56C6C;
        opacity: 0.5;
        z-index: 1;
        // 缩放
    }

    &:hover {
        .remove {
            display: block;
        }
    }
}
</style>
